<template>
    <div class="container">
        <div class="head">
            <!-- <div class="head-item">
                <img @click="prevYear" class="arrow" src="./img/left-arr.png" alt="">
                <div class="md-num">{{year}}</div>
                <img @click="nextYear" class="arrow" src="./img/right-arr.png" alt="">
            </div> -->

            <div class="head-item">
                <img @click="prevMonth" class="arrow" src="./img/left-arr.png" alt="">
                <div class="md-num">{{year}}年{{month + 1}}月</div>
                <img @click="nextMonth" class="arrow" src="./img/right-arr.png" alt="">
            </div>
        </div>
        <div class="the-line"></div>
        <div class="cal-list">
            <div class="cal-item">日</div>
            <div class="cal-item">一</div>
            <div class="cal-item">二</div>
            <div class="cal-item">三</div> 
            <div class="cal-item">四</div>
            <div class="cal-item">五</div>
            <div class="cal-item">六</div>
            <div @click="select(item)" v-for="(item,index) in list" :key="index" class="cal-item">
                <div class="cal-item-d" 
                :class="{
                    normal:item.isNormal,
                    late:item.isLate,
                    lack:item.isLack,
                    leave:item.isLeave,
                    outer:item.isOuter,
                    supply: item.isSupply,
                    active:curDate == item.str,
                    future:item.isFuture
                    }">
                  
                    <span v-if="item.str == nowStr"  >今天</span>
                    <span v-else>{{item.num}}</span>
                </div>
              
            </div>
           <!-- <div class="chekType" v-if="isShow">
                <ul>
                    <li><i class="zheng"></i><span>正常</span></li>
                    <li><i></i><span>迟到、早退</span></li>
                    <li ><i class="kuang"></i><span>{{lackText}}</span></li>
                    <li><i class="qingjia"></i><span>请假</span></li>
                </ul>
            </div> -->
            <div class="chekType" v-if="isShow">
                <div class="chekType-item"><i class="normal"></i><span>正常</span></div>
                <div  class="chekType-item"><i class="late"></i><span>异常</span></div>
                
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:[
        "late",
        "lack",
        "leave",
        "normal",
        "outer",
        "supply",
        "activeDate",
        "lackText",
        "isShow",
        'disableFuture'
    ],
    watch:{
        late:function(indexVal, oldVal){
          this.initDateList(new Date(this.year,this.month,1));
        },
        lack:function(indexVal, oldVal){
          this.initDateList(new Date(this.year,this.month,1));
        },
        leave:function(indexVal, oldVal){
          this.initDateList(new Date(this.year,this.month,1));
        },
         normal:function(indexVal, oldVal){
          this.initDateList(new Date(this.year,this.month,1));
        },
         outer:function(indexVal, oldVal){
          this.initDateList(new Date(this.year,this.month,1));
        },
         supply:function(indexVal, oldVal){
          this.initDateList(new Date(this.year,this.month,1));
        }
    },

    data(){
        return {
            list :[],
            now:{},
            nowStr:"",
            year:0,
            month:0,
            curDate:"",
            isTeacher: false
        }
    },

    methods:{
        initDateList(date){
            
            this.list = [];

            if(date){
              
                date = new Date(date.getFullYear(),date.getMonth(),1);
            }else{
                  date = new Date();
                date = new Date(date.getFullYear(),date.getMonth(),1);
            }
            
            var year = date.getFullYear();
            this.year = year;

            var month = date.getMonth();
            this.month = month

            var d = date.getDate();
            var day = date.getDay();
            var first = new Date(year,month,1);

            this.list.push(this.getItem(first));

            while(true){
               
                var time = first.getTime();
                time += 1000 * 60 * 60 * 24;

                var nextDate = new Date(time);

                
                if(nextDate.getMonth() == first.getMonth()){
                     this.list.push(this.getItem(nextDate));

                    first = nextDate;
                }else{
                    break;
                }
            }

        
            console.log("day:" + day);
            for(var i = 0;i<day;i++){
                this.list.unshift({

                });
            }

           

        },

        dateToStr(d){
              var year = d.getFullYear();
            var month = d.getMonth() >=9 ? d.getMonth() + 1 : '0' + ( d.getMonth() + 1);
            var date = d.getDate() >9 ? d.getDate() : '0' + d.getDate();
            var str = year + '-'+month+'-'+ date;

            return str;

        },

        getItem(d){
         
            return {
                num:d.getDate(),
                str:this.dateToStr(d),
                date:d,
                isLate:this.isLate(d),
                isLack:this.isLack(d),
                isLeave:this.isLeave(d),
                isNormal:this.isNormal(d),
                isOuter: this.isOuter(d),
                isSupply: this.isSupply(d),
                isFuture:this.isFuture(d)
            }
        },

        isFuture(d){
            if(!this.disableFuture){
                return false
            }
            var now = new Date()
            if(d.getTime() > now.getTime()){
                return true
            }else{
                return false
            }
        },

        isNormal(d){
             if(!this.normal){
                return false
            }

            var flag = false;
            for(var item of this.normal){
                
                var normalDate = new Date(item);
                var normalStr = normalDate.getFullYear()+"-"+normalDate.getMonth()+"-"+normalDate.getDate();
                var str = d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate();
                if(normalStr == str){
                    flag = true;
                }
            }

            return flag;
        },
        

        isLate(d){
            if(!this.late){
                return false
            }

            var flag = false;
            for(var item of this.late){
                
                var lateDate = new Date(item);
                var lateStr = lateDate.getFullYear()+"-"+lateDate.getMonth()+"-"+lateDate.getDate();
                var str = d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate();
                if(lateStr == str){
                    flag = true;
                }
            }

            return flag;
        },

        isLack(d){
            if(!this.lack){
                return false
            }

            var flag = false;
            for(var item of this.lack){
                var lackDate = new Date(item);
                var lackStr = lackDate.getFullYear()+"-"+lackDate.getMonth()+"-"+lackDate.getDate();
                var str = d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate();
                if(lackStr == str){
                    flag = true;
                }
            }

             return flag;
        },

        isLeave(d){
            if(!this.leave){
                return false
            }

            var flag = false;
            for(var item of this.leave){
                var leaveDate = new Date(item);
                var leaveStr = leaveDate.getFullYear()+"-"+leaveDate.getMonth()+"-"+leaveDate.getDate();
                var str = d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate();
                if(leaveStr == str){
                    flag = true;
                }
            }

             return flag;
        },

        isOuter (d) {
            if(!this.outer){
                return false
            }

            var flag = false;
            for(var item of this.outer){
                var outerDate = new Date(item);
                var outerStr = outerDate.getFullYear()+"-"+outerDate.getMonth()+"-"+outerDate.getDate();
                var str = d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate();
                if(outerStr == str){
                    flag = true;
                }
            }

             return flag;
        },
        isSupply (d) {
            if(!this.supply){
                return false
            }

            var flag = false;
            for(var item of this.supply){
                var supplyDate = new Date(item);
                var supplyStr = supplyDate.getFullYear()+"-"+supplyDate.getMonth()+"-"+supplyDate.getDate();
                var str = d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate();
                if(supplyStr == str){
                    flag = true;
                }
            }

             return flag;
        },

        prevYear(){
            this.year --;

            this.initDateList(new Date(this.year,this.month,1));

            this.$emit('change',this.year,this.month);
        },

        nextYear(){
             this.year ++;

            this.initDateList(new Date(this.year,this.month,1));

             this.$emit('change',this.year,this.month);
        },

        prevMonth(){
            if(this.month == 0){
                this.month = 11;
                this.year --;
            }else{
                this.month --;
            }

            this.initDateList(new Date(this.year,this.month,1));

             this.$emit('change',this.year,this.month);

             var date = new Date(this.year,this.month,1)
            //  this.curDate = this.dateToStr(date)
        },

        nextMonth(){
             if(this.month == 11){
                this.month = 0;
                this.year ++;
            }else{
                this.month ++;
            }

            this.initDateList(new Date(this.year,this.month,1));

            this.$emit('change',this.year,this.month);

             var date = new Date(this.year,this.month,1)
            //  this.curDate = this.dateToStr(date)
        },

        select(item){
            if(this.disableFuture && item.isFuture){
                return
            }
            var d = item.date
            var year = d.getFullYear();
            var month = d.getMonth() >=9 ? d.getMonth() + 1 : '0' + ( d.getMonth() + 1);
            var date = d.getDate() >9 ? d.getDate() : '0' + d.getDate();
            var str = year + '-'+month+'-'+ date;

            this.curDate = str;

            this.$emit('select',str);
        }
    },

    mounted(){
      
        this.now = new Date();
        this.nowStr = this.dateToStr(this.now);
        this.curDate = this.nowStr
        
    //     if(this.activeDate){
    //         this.curDate = this.activeDate
    //         this.initDateList(new Date(this.curDate));
    //    }else{
           this.initDateList();
    //    }

         

    }
}
</script>
<style scoped>
.container{
        margin: 0 auto;
    width: 6.26rem;
    height: 8.5rem;
    /* height: 5.9rem; */
    padding: 0.35rem 0.22rem;
    border-radius: 5px;
    /* -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); */
    /* box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); */
    /* -webkit-box-sizing: border-box; */
    /* box-sizing: border-box; */
    background-color: #fff;
}
.head{
    display: flex;
    justify-content: space-between;
}
.head-item{
    display: inline-block;
    margin: 0 auto;
}
.arrow{
    display: inline-block;
    vertical-align: middle;
    padding: 0 0.1rem;
    width: 0.28rem;
    height: 0.28rem;
}
.md-num{
    display: inline-block;
    width: 2.5rem;
    vertical-align: middle;
    text-align: center;
    font-size: 0.32rem;

}
.the-line{
    width: 6.3rem;
    margin: 0.3rem auto 0 auto;
    border-top: #e5e5e5 1px solid;
}
.cal-list{
    /* display: flex;
    justify-content: space-between;
    flex-wrap:wrap; */
}
.cal-item{
    width: 0.89rem;
    text-align: center;
    padding: 0.2rem 0;
    font-size: 0.28rem;
    float: left;
}
.foot{
    clear: both;
}


.chekType{
    overflow: hidden;
    width: 6rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    clear: both;
    text-align: center;
}
.chekType-item{
    font-size: 0.24rem;
    display: inline-block;
    vertical-align: middle;
    color: #999999;
    margin:0 0.3rem;

}
.chekType-item i{
    width: 0.16rem;
    height: 0.16rem;
    border-radius: 0.16rem;
  
    display: inline-block;
    margin-right: 0.08rem
}
.kuang{
    background-color: #ff7070 !important;
}
.qingjia{
    background-color: #4bb0f4 !important;
}
.zheng{
    background-color: #f2f2f2 !important;
}

.cal-item-d{
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    line-height: 0.7rem;
    margin: 0 auto;
    font-size: 0.32rem;
}
.bai{
   color: #fff !important;
}
.cheng{
    color: #ff8800
}
.normal{
    background: #40cfa4;
    color: #fff !important;
}
.late{
    background: #ff9900;
    color: #fff !important;
}
.lack{
    background: #ff2f2f;
    color: #fff !important;
}

.leave{
    background: #3d3b3b;
    color: #fff !important;
}
.outer{
    background: #9bad52;
    color: #fff !important;
}
.supply{
    background: #69b629;
    color: #fff !important;
}
.future{
    color:#a5a4a4 !important;
}
.active{
    background: #4BB0F4;
    color: #fff !important;
}
.zhengchang{
    background-color: #4BB0F4 !important;
}
.quewu{
    background-color: #FFA927 !important;
}
.yichang{
    background-color: #FF5746 !important;
}
</style>
